<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>关于我的</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,700italic,800,300,300italic,400italic,400,600,600italic'
          rel='stylesheet' type='text/css'>
    <!--Custom-Theme-files-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <!--/script-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });
        });
    </script>
    <style type="text/css">
        a.fora {
            border: none;
            color: #ffffff;
            padding: 11px 53px;
            margin-left: 10px;
            font-size: 17px;
            cursor: pointer;
            background: orangered;
            border: none;
            outline: none;
            -webkit-appearance: none;
        }
        a.fora:hover {
            background: #4A245E;
        }
        hr{
            width: 100%;
            color: orange;
            border: 1px solid;
        }
        #my-menu{
            width: 750px;
            height: 45px;
            margin: 0 0 10px 0;
        }
        #my-data{
            width: 750px;
            height: 600px;
            border: grey 1px solid;
            margin-left: 10px;
            display: none;
        }
    </style>
</head>
<body>
<div class="full">
    <div class="col-md-9 main">
        <div>
            <form action="UploadHeaderServlet" method="post" enctype="multipart/form-data">
                <div class="general-news">
                    <div class="general-inner">
                        <c:if test="${empty loginuser.userpic}">
                            <img src="images/co.png" alt="..."  class="img-responsive" alt="" style="height:70px;width: 70px ">
                        </c:if>
                        <c:if test="${not empty loginuser.userpic}">
                            <img src="images/${loginuser.userpic}" alt="..."  class="img-responsive" alt="" style="height:70px;width: 70px ">
                        </c:if>
                        <h5 class="top"><a href="javascript:void(0)" id="mod-pic" onclick="modifyPic()">修改头像</a> </h5>
                        <div id="modify-pic" style="display: none" >
                            <h5 class="top"><input type="file" name="pic"/></h5>
                            <h5 class="top"> <input type="submit" value="确认修改头像"></h5>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <hr >
        <div id="my-menu">
            <a class="fora" onclick="show(1)">我发布的</a>
            <a class="fora" onclick="show(2)">我收藏的</a>
            <a class="fora" onclick="show(3)">我关注的</a>
            <a class="fora" onclick="show(4)">我回复的</a>
        </div>
        <div id="my-data">
            <div id="mydata1">
                我发布的
            </div>
            <div id="mydata2">
                我收藏的
            </div>
            <div id="mydata3">
                我关注的
            </div>
            <div id="mydata4">
                我回复的
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    /* 在同一个框内，点击不同的按钮显示不同的内容*/
    function show(num)
    {
        for(var i=1; i<=4; i++)
        {
            document.getElementById("mydata"+i).style.display="none";
        }
        document.getElementById("my-data").style.display="block";
        document.getElementById("mydata"+num).style.display="block";
    }
    function modifyPic() {
        $("#modify-pic").toggle();
    }
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $().UItoTop({ easingType: 'easeOutQuart' });

    });
</script>
<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</body>
</html>
